<template>
  <view class="message-content">
    <view class="header-box">
      <view class="left">
        <view class="head-img">
          <u-image width="70rpx" height="70rpx" border-radius="35rpx"
            src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=3011893491,4249262958&fm=26&gp=0.jpg"></u-image>
        </view>
        <view class="info">
          <view class="name">
            张琳
          </view>
          <view class="time">
            01月02日21:27
          </view>
        </view>
      </view>
      <view class="right">
        回复
      </view>
    </view>
    <view class="first-message">
      好的，等我!
    </view>
    <view class="img-list-box">
      <view class="row-box" v-for="(item, index) in getImgList(article.imageUrlList)" :key="index">
        <view class="column-box" v-for="(bitem, bindex) in item" :key="bindex">

          <view class="img-single">
            <u-image width="100%" height="100%" border-radius="10rpx" :src="bitem"
              @click="previewImage(bindex)"></u-image>
          </view>
        </view>
        <view class="column-box" v-if="" v-for="(citem, cindex) in (3 - item.length)" :key="cindex">
          <view class="img-single">
          </view>
        </view>
      </view>
    </view>
    <view class="message-list">
     <view class="single-mess">
        <span class="man">{{article.username}} </span>
        {{article.content}}
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name: "message_box",
    props: {
      article: {
        type: Object,
        default: {
          id: 0,
          username: '白杨树',
          time: '01-15 20:37',
          machine: 'iPhone 12 Pro Max',
          content: '这里说的图片图标，指的是小图标，起作用定位为"icon"图标作用，而非大尺寸的图片展示场景，理论上，这个小图标应该为png格式的正方形图标。',
          imageUrlList: [
    
          ],
          collectNum: 321,
          likeNum: 999
        }
      }
    },
    data() {
      return {
        article_info: {
          id: 0,
          username: '白杨树',
          time: '01-15 20:37',
          machine: 'iPhone 12 Pro Max',
          content: '这里说的图片图标，指的是小图标，起作用定位为"icon"图标作用，而非大尺寸的图片展示场景，理论上，这个小图标应该为png格式的正方形图标。',
          imageUrlList: [
            "https://guet-lab.oss-cn-hangzhou.aliyuncs.com/api/2024/09/10/01753cdf-fb66-4aac-a091-05d2e046f59c.jpg",
            "https://guet-lab.oss-cn-hangzhou.aliyuncs.com/api/2024/09/10/dfd9d9a3-8e01-4ddf-8dfc-81d546f62069.jpg"
          ],
          collectNum: 321,
          likeNum: 999
        },
        firstComment:[]
      };
    },
    mounted() {
      this.getfirstComment()
      // console.log('Component mounted with article information:', this.article_info);
    },
    methods: {
      getImgList(list) {
        let newList = [
          []
        ]
        for (let i = 0; i < list.length; i++) {
          newList[newList.length - 1].push(list[i])
          if ((i + 1) % 3 == 0) {
            newList.push([])
          }
        }
        // console.log('数组', newList)
        return newList
      },
      previewImage(index) {
        uni.previewImage({
          urls: this.article_info.imageUrlList,
          current: index,
          indicator: this.currentIndicator,
          loop: this.isLoop
        })
      },
      async getfirstComment() {//未完善
        try {
          const response = await uni.$http.get(
            `/photo/comment/first?shareId=${this.article.id}`);
          console.log("一级评论", response.data);
        } catch (error) {
          console.error('请求失败:', error);
          uni.showToast({
            title: '请求失败，请稍后重试',
            icon: 'none'
          });
        }
      },

      async getComment() {
        try {
          const response = await uni.$http.get(
            `/photo/comment/first?shareId=${this.article_info.pUserId}&userId=${uni.getStorageSync('userid')}`);
          console.log("关注", response.data);
        } catch (error) {
          console.error('请求失败:', error);
          uni.showToast({
            title: '请求失败，请稍后重试',
            icon: 'none'
          });
        }
      },
    },
  }
</script>

<style lang="scss">
  .message-content {
    padding: 20rpx;
    background-color: #FFFFFF;

    .header-box {
      display: flex;
      margin-bottom: 20rpx;

      .left {
        flex: 1;
        display: flex;

        .head-img {
          margin-right: 20rpx;
        }

        .info {
          .name {
            margin-bottom: 8rpx;
            font-size: 32rpx;
            color: #222222;
            font-weight: 600;
          }

          .time {
            font-size: 23rpx;
            color: #bfbfbf;
          }
        }

      }

      .right {
        font-size: 32rpx;
        font-weight: 600;
        color: #13227a;
      }
    }

    .first-message {
      font-size: 35rpx;
      font-weight: 550;
      line-height: 1.5;
      margin-bottom: 20rpx;
    }

    .content-box {
      background-color: #e6e6e6;
      display: flex;
      margin-bottom: 20rpx;

      .left {
        width: 200rpx;
        height: 200rpx;
        overflow: hidden;
        border-radius: 20rpx;
      }

      .right {
        flex: 1;
        font-size: 28rpx;
        font-weight: 550;
        line-height: 1.5;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-left: 20rpx;
        padding-right: 20rpx;

        .text-content {
          .man {
            color: #1296db;
            margin-right: 15rpx;
          }
        }

      }
    }

    .message-list {
      .single-mess {
        font-size: 28rpx;
        font-weight: 550;
        line-height: 1.5;
        margin-bottom: 8rpx;

        .man {
          color: #13227a;
          margin-right: 10rpx;
        }
      }
    }
    .img-list-box {
      .row-box {
        display: flex;
        justify-content: space-between;
        margin-bottom: 2vw;
    
        .column-box {
          display: flex;
    
          .img-single {
            width: 30vw;
            height: 30vw;
          }
        }
      }
    }
  }
</style>